<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>故事列表</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			.list{
				min-height: 40px;
			}
			.list li{
				list-style: none;
				display: flex;
				align-items: center;
				flex-flow: row nowrap;
				margin-bottom: 10px;
				background: #e2e2e2;
				padding:20px 0;
			}
			.img-media{
				width: 200px;
				margin:30px;
				display: flex;
				padding-right: 20px;
				padding-left: 20px;
				align-items: center;
				align-self: center;
			}
			.list li img{
				width: 100%;
			}
			.list li p{
				flex: 1;
				text-indent: 30px;
				line-height: 3;
				word-break: break-all;
			}
			.list li h3{
				margin-bottom: 30px;
				text-align: center;
			}
			@media only screen and (max-width:480px ) {
				.list li .img-media{
					width: 100px;
					margin-right: 20px;			
					height: 100px;
					margin: 0;
					align-self: center;
				}
				.list li .right{
					flex:1;
					align-self: center;
				}
				.list li p{
					padding-right: 20px;
					text-indent: 30px;
					line-height: 2;
					font:400 24px/1.25 "楷体";
				}
				.list li h3{
					font:800 30px/1 "楷体";
					text-align: left;
					margin-bottom: 10px;
				}
			}
		</style>
	</head>
	<body ondragstart="return false">
		<ul id="list" class="list">
		</ul>
	</body>
	<script src="http://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>
	<script type="text/javascript">
		var page = 1;
		function formatterDateTime() {
		    var date=new Date()
		    var month=date.getMonth() + 1
	        var datetime = date.getFullYear()
	                + ""// "年"
	                + (month >= 10 ? month : "0"+ month)
	                + ""// "月"
	                + (date.getDate() < 10 ? "0" + date.getDate() : date
	                        .getDate())
	                + ""
	                + (date.getHours() < 10 ? "0" + date.getHours() : date
	                        .getHours())
	                + ""
	                + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
	                        .getMinutes())
	                + ""
	                + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
	                        .getSeconds());
	        return datetime;
	    }
		function ajax(obj,cb){
			$.ajax({
				type:obj.fn,
				url:obj.url || "get",
				data:obj.data,
				success:function(data){
					if(typeof data === "string"){
						cb($.parseJSON(data))
					}else{
						cb(data);
					}
				}
			});
		}
		function lazyload(){
			ajax({
				url:"https://route.showapi.com/955-1",
				data:{
					showapi_appid:33584,
					showapi_sign:"bc26e7ff16d746f69d4430889ad03c49",
					type:"dp",
					showapi_timestamp:formatterDateTime(),
					page:page
				}
			},function(data){
				data = data.showapi_res_body.pagebean;
				console.log(data);
				$.each(data.contentlist,function(i,val){
					var $div = $("<div class='img-media'>");
					var $img = $("<img>").attr("src",val.img);
					$div.append($img)
					var $h3 = $("<h3>").text(val.title);
					var p = $("<p>").text(val.desc);
					p.attr("data-id",JSON.stringify({
						"id":val.id,
						"title":val.title
					}))
					var $li = $("<li>");
					$li.append($div)
					var $div = $("<div class='right'>");
					$div.append($h3)
					$div.append(p)
					$li.append($div);
					$("#list").append($li);
					
				})
	
			})
		}
		lazyload()
		
		$(window).scroll(function(){
			if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
	           var timer = setTimeout(function(){
	        		page++;
	        		lazyload();
	        	},200)
	        }
		})
		$("#list").on("click","li",function(){
			var $id = $(this).find("p").data("id");
			console.log($id);
			localStorage.setItem("data",JSON.stringify($id));
			console.log(localStorage)
			location.href = "./index-detail.html"
		})
		
		
	</script>
</html>
